<template>
<div class="container">
  <select v-model="rows" class="custom-select-sm" @change="selectPage()">
    <option value="1">单条/每页</option>
    <option value="5">5条/每页</option>
    <option value="10">10条/每页</option>
    <option value="15">15条/每页</option>
    <option value="0">全部</option>
  </select>
  <button type="button" class="btn btn-success" style="margin-left:630px ;" @click="user_add()" >新增</button>
  <span>{{$route.query.userName}}</span>
  <span @click="logout()">退出</span>
  <el-table id="table" class="table">
    <thead>
      <th></th>
      <th>序号</th>
      <th>用户</th>
      <th>密码</th>
      <th>操作</th>
    </thead>
    <tbody>
      <tr v-for="x in userList">
        <td></td>
        <td>{{x.userId}}</td>
        <td>{{x.userName}}</td>
        <td>{{x.userPwd}}</td>
        <td>
          <button type="button" class="btn btn-primary" @click="user_ediot(x)">编辑</button>
          <button type="button"class="btn btn-danger" @click="user_del(x)">删除</button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <!-- 分页 -->
      <tr>
      </tr>
    </tfoot>
  </el-table>
  <div style="text-align: center;">

    <span style="float: left;">一共有{{total}}条数据</span>
    <span style="float: left;margin-left: 50px;">共{{totalPage}}页</span>
    <button type="button" class="btn btn-success" @click="firstPage()">首页</button>
    <button type="button" class="btn btn-primary" @click="prePage()">上一页</button>
     <span>当前{{curPage}}页</span>
    <button type="button" class="btn btn-primary" @click="nextPage()">下一页</button>
    <button type="button" class="btn btn-success" @click="endPage()">尾页</button>
  </div>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel">{{modal_title}}</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              </div>
              <div class="modal-body">
                <label>用户ID:</label>
                <input type="hidden" v-model="userForm.userId">
                <br>
                <label>用户名:</label>
                <input type="text" v-model="userForm.userName"/>
                <br>
                <label>密码:</label>
                <input type="text" v-model="userForm.userPwd"/>
                <br>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary" @click="saveInfo()">提交</button>
              </div>
          </div><!-- /.modal-content -->
      </div><!-- /.modal -->
  </div>
</div>
</template>

<script>
 //导入模块
 export default {
    name:"userList", //该模块组件的名称 data:{}
    data(){
      return {
         userList:[],
         title:"用户页面",
         userForm:{
           userId:"",
           userName:"",
           userPwd:""
         },
         modal_title:"模态框",
         total:0,//总条数
         totalPage:0,//总页数
         curPage:1,//当前页
         rows:5//每页显示条数
      }
    },
    methods:{ //定义函数 methods:{}
      loaddata(){ //获取全部用户信息方法
          var mythis = this;
         $.ajax({
            url:"http://localhost:8080/user-info/pageList",
            type:"get",
            data:{"page":mythis.curPage,"row":mythis.rows},
            dataType:"json",
            success:function(data){
              console.log(data.info);
              mythis.userList=data.info;
              mythis.total=data.total;
              mythis.totalPage=data.totalPage;
            }
         })
      },
      firstPage(){
        this.curPage=1;
        this.loaddata();
      },
      endPage(){
        this.curPage=this.totalPage;
        this.loaddata();
      },
      prePage(){
        this.curPage--;
        if(this.curPage<1){
          this.curPage=1;
        }
        this.loaddata();
      },
      nextPage(){
        this.curPage++;
        if(this.curPage>=this.totalPage){
          this.curPage=this.totalPage;
        }
        this.loaddata();
      },
      selectPage(){
        if(this.rows==0){
          this.rows=this.total;
        }
       this.curPage =1;
       this.loaddata();
      },
      user_add(){
        //打开模态框
        $("#myModal").modal("show");
        //更改模态框标题
        this.modal_title="新增模态框";
        //清除模态框元素值
        this.userForm.userId="";
        this.userForm.userName="";
        this.userForm.userPwd ="";
      },
      user_ediot(x){
        //显示模态框
        $("#myModal").modal("show");
        //更改模态框的标题
         this.modal_title="修改模态框";
          console.log(x)
        //把选中的值赋值给模态框的表单匀速
        this.userForm.userId=x.userId;
        this.userForm.userName=x.userName;
        this.userForm.userPwd = x.userPwd;
      },
      user_del(x){
        //显示模态框
        $("#myModal").modal("show");
        //更改模态框的标题
         this.modal_title="确认删除一下信息？";
        console.log(x);
        //把选中的值赋值给模态框的表单匀速
        this.userForm.userId=x.userId;
        this.userForm.userName=x.userName;
        this.userForm.userPwd = x.userPwd;
      },
      saveInfo(){//保存
        var url=""
        if(this.modal_title=="修改模态框"){
            url="http://localhost:8080/user-info/update"
        }else if(this.modal_title=="新增模态框"){//新增
           url="http://localhost:8080/user-info/add"
        }else{
          url="http://localhost:8080/user-info/del?userId="+this.userForm.userId;
        }

        var mythis = this;
         $.ajax({
           url:url,
           type:"get",
           data:mythis.userForm,
           dataType:"json",
           success:function(data){
             console.log(data)
             alert(data.info);
             if(data.info=="新增成功" || data.info=="修改成功" || data.info=="删除成功"){
               //关闭模态框
               $("#myModal").modal("hide");
               //刷新
               mythis.loaddata();
            }
          }
        })
      },
      logout(){//退出登录

      this.$router.replace("/");
      },
    },
    mounted(){//挂载函数，类似于前端的文档加载事件  onload()
       console.log("挂载函数:在页面展示之前执行，获取展示数据");
       this.loaddata();
    }
 }
</script>

<style>
</style>
